<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
    <hr/>
    <h2>当前的信息为：{{msg}}</h2>
    <button @click="msg+='!'">修改信息</button>
    <hr/>
    <h2>一个人的信息</h2>
    <h3>姓名：{{person.name}}</h3>
    <h3>年龄：{{person.age}}</h3>
    <h3>薪资：{{person.job.j1.salary}}k</h3>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age++">增加年龄</button>
    <button @click="person.job.j1.salary++">加薪</button>
</template>

<script>
//vue3中监视属性是组合api
import { ref, reactive, watch } from 'vue';
export default {
  name: 'Demo', 
  //vue2监视属性
  /*
  watch: {
    //简写
    //sum(newValue, oldValue) {
    //    console.log(`sum的值从${oldValue}变成了${newValue}`)
    //}
    //完整写法
    sum: {
        handler(newValue, oldValue) {
            console.log(`sum的值从${oldValue}变成了${newValue}`)
        },
        immediate: true, //立即监视
        deep: true, //深度监视
    }
  },
  */
  setup() {
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
        name: '张三',
        age: 18,
        job: {
            j1: {
                salary: 20, 
            }
        }
    })

    //vue3监视属性
    //1. 监视一个ref定义的响应式数据，调用watch函数，传入回调函数。不需要接收返回值；watch的第三个参数可以指定配置
    watch(sum, (newValue, oldValue)=>{
        console.log(`sum的值从${oldValue}变成了${newValue}`)
    }, {
        //配置立即监视
        immediate: true,
    })

    //2.监视多个ref定义的响应式数据，此时回调函数的参数都是数组
    // watch([sum, msg], (newValues, oldValues)=>{
    //     console.log(`sum的值从${oldValues[0]}变成了${newValues[0]}`)
    //     console.log(`msg的值从${oldValues[1]}变成了${newValues[1]}`)
    // })

    //3.监视reactive定义的数据
    watch(person, (newValue, oldValue)=>{
        //坑1：newValue和oldValue的值相同，都是最新的值，即拿不到真正的oldValue；(如果监视ref定义的对象，需要监视person.value，但依然拿不到真正的oldValue)
        //坑2：不开启深度监视，vue3也监视深层属性变化；即vue3强制开启深度监视，deep:false配置无效
        console.log('person变化了', newValue, oldValue)
    })

    //4.监视reactive定义的对象中的某一属性时，不能直接写person.age，需要写成一个函数
    watch(() => person.age, (newValue, oldValue)=>{
        console.log('person.age变化了', newValue, oldValue)
    })

    //5.监视reactive定义的对象中的几个属性时，将返回每个属性的函数放到数组中
    // watch([() => person.name, ()=> person.age], (newValue, oldValue)=>{
    //     console.log('person.name或person.age变化了', newValue, oldValue)
    // })

    //6. 特殊情况，坑3：当监视person.job时，如果修改深层数据salary，必须开启深度监视；注意区别于情况3
    watch(() => person.job, (newValue, oldValue)=>{
        console.log('person.job变化了', newValue, oldValue)
    }, {
        deep: true
    })


    return {
        sum,
        msg,
        person,
    }
  }
}
</script>

<style>
</style>